<template>
  <div class='course-evaluation'>
    <div class="title">课程评价</div>
    <div class="common-card">
      <div class="course-title">{{ orderDetails.order.courseName }}</div>
      <div class="item-info">
        <span>作者：</span><span>{{ orderDetails.expert.name }}</span>
      </div>
      <div class="item-info">
        <span>作者所在机构：</span><span>{{ orderDetails.expert.unit }}</span>
      </div>
      <div class="item-info">
        <span>作者职称：</span><span>{{ orderDetails.expert.expertTitle }}</span>
      </div>
      <div class="item-info">
        <span>课程分类：</span><span>{{ }}</span>
      </div>
    </div>
    <div v-for="(quesItem, quesIndex) in questionList" :key="quesIndex" class="common-card">
      <div class="ques-title">{{ quesIndex + 1 }}.{{ quesItem.qusetions }}</div>
      <div v-if="quesItem.type != '1'" class="eva-title">
        <span class="desc">您的评价：</span>
        <span class="score">{{ quesItem.mark }}.0</span>
      </div>
      <van-field v-if="quesItem.type == '1'" v-model="quesItem.content" rows="5" autosize type="textarea"
        placeholder="请输入意见或建议" />
      <van-rate v-else :size="30" void-icon="like" icon="like" void-color="#CBCACB" color="#FCB445"
        v-model="quesItem.mark" />
      <div v-if="quesIndex == questionList.length - 1" class="flex-center">
        <van-button color="#AE3845" style="width: 90%;" type="primary" round size="large" @click="submit">提交</van-button>
      </div>
    </div>

  </div>
</template>

<script>
/**
 * 课程评价信息
 */
export default {
  name: 'course-evaluation'
}
</script>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { $GET, $POST } from '@/utils/request.js'
import { showSuccessToast, showFailToast } from 'vant';
import 'vant/lib/index.css'

const route = useRoute()

const questionList = ref([])


const getQuesList = () => {
  $GET('/Preach/GetEvaluateModelList').then(res => {
    if (res.isError) return
    questionList.value = res.result.dataLst.map(item => {
      return { ...item, mark: 0, content: '' }
    })
  })
}

/**获取订单信息 */
const orderDetails = ref({ order: {}, expert: {} })
const getOrder = () => {
  $GET('/Preach/GetPreachOrderDetail', { id: route.query.orderId }).then(res => {
    if (res.isError) return
    orderDetails.value = res.result
  })
}

getQuesList()
getOrder()

/**提交评价 */
const submit = () => {
  const submitData = {
    uid: '0',
    orderId: route.query.orderId,
    evaluates: questionList.value.map(item => ({
      evaluateModelId: item.id,
      mark: item.mark,
      content: item.content,
    }))
  }
  $POST('/Preach/AddPreachEvaluate', submitData).then(res => {
    if (res.isError) return showFailToast(res.message);
    showSuccessToast(res.message);
  })
}
</script>
<style lang="scss" scoped>
.course-evaluation {
  padding-bottom: 30px;
  min-height: 100vh;
  font-family: PingFang SC, PingFang SC;
  background: linear-gradient(to bottom,
      #AA2D3A 0%,
      #AA2D3A 386px,
      #FAFAFA 386px,
      #FAFAFA 100%);

  .title {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    padding: 70px 0 25px;
    line-height: 81px;
  }

  .common-card {
    width: 693px;
    margin: 0 auto 24px;
    min-height: 271px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 26px 22px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 26px;
      left: 0;
      background-color: #AE3845;
      width: 5px;
      height: 37px;
    }

    :deep(.van-rate) {
      width: 100%;
      justify-content: space-between;
      gap: 18px;

      .van-rate__item {
        font-size: 26px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F5F6F8;
        border-radius: 6px;
        height: 105px;
        padding-right: 0;
      }
    }

    :deep(.van-cell) {
      padding-left: 0;
      padding-right: 0;

      .van-field__control {
        background-color: #FBFBFC;
        border-radius: 10px;
      }
    }
  }

  .course-title {
    font-size: 26px;
    font-weight: 500;
    color: #000000;
    font-weight: bold;
    margin-bottom: 23px;
  }

  .ques-title {
    font-size: 26px;
    font-weight: bold;
    color: #343434;
    line-height: 40px;
    border-bottom: 2px solid #F5F5F5;
    padding-bottom: 16px;
  }

  .eva-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 13px 0 10px;

    .desc {
      font-size: 22px;
      font-weight: 400;
      color: #7C7C7C;
    }

    .score {
      font-size: 26px;
      font-weight: 500;
      color: #FCB445;
    }
  }

  .item-info {
    display: flex;
    margin-bottom: 16px;
    font-size: 22px;

    span {
      flex: 1;
      color: #7C7C7C;

      &:last-child {
        color: #313131;
        text-align: right;
      }
    }
  }

  .flex-center {
    padding: 30px 0 2px;
    background-color: #fff;
  }

  .textarea {
    width: 100%;
    height: 515px;
    font-size: 24px;
    background: #FBFBFC;
    height: 230px;
    border-radius: 10px;
    border: none;
    resize: none;
  }
}
</style>
